<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>个人信息</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../css/oksub.css">
</head>
<body>
<div class="ok-body">
    <!--form表单-->
    <form class="layui-form layui-form-pane ok-form" lay-filter="filter">
        <div class="layui-form-item">
            <label class="layui-form-label">管理员ID</label>
            <div class="layui-input-block">
                <input readonly unselectable="on"  type="text" name="adminid" placeholder="请输入管理员帐号ID" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">管理员姓名</label>
            <div class="layui-input-block">
                <input type="text" name="realname" placeholder="请输入管理员姓名" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">电话号码</label>
            <div class="layui-input-block">
                <input type="text" name="contactnumber" placeholder="请输入管理员电话号码" autocomplete="off" class="layui-input" lay-verify="required">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">管理员权限</label>
            <div class="layui-input-block">
                <input id="permission" readonly unselectable="on"  type="text" name="type" placeholder="请输入管理员权限" class="layui-input" >
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                <label class="layui-form-label">管理员当前头像</label>
                <img class="layui-upload-img" id="demo1" width="100" height="100" onerror="this.src=window.document.location.pathname.substring(0,window.document.location.pathname.substr(1).indexOf('/')+1)+'/image/avatar.png'">
                <legend style="color: #ff0000;font-size: 10px">右边上传头像即可更改头像</legend>
            </div>
            <div class="layui-col-xs6 layui-col-sm6 layui-col-md6">
                <label class="layui-form-label">管理员头像</label>
                <div class="layui-input-block">
                    <div class="layui-upload-drag" id="test10">
                        <i class="layui-icon"></i>
                        <p>点击上传，或将文件拖拽到此处</p>
                        <div class="layui-hide" id="uploadDemoView">
                            <hr>
                            <img src="" alt="上传成功后渲染" style="max-width: 196px">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="edit">立即提交</button>
                <button class="layui-btn layui-btn-warm" id="reloadData" lay-filter="reloadData">重新获取</button>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <legend style="color: #ff0000;font-size: 10px">数据可能获取失败请重新获取或更换浏览器内核(部分浏览器极速模式失败概率高)</legend>
            </div>
        </div>
    </form>
</div>
<!--js逻辑-->
<script src="../lib/layui/layui.js"></script>
<script>
    layui.use(["element", "form", "laydate", "okLayer", "okUtils","upload","jquery"], function () {
        let form = layui.form;
        let laydate = layui.laydate;
        let okLayer = layui.okLayer;
        let okUtils = layui.okUtils;
        let upload = layui.upload;
        let $ = layui.jquery;

        laydate.render({elem: "#birthday", type: "datetime"});

        form.verify({
            birthdayVerify: [/^((((1[6-9]|[2-9]\d)\d{2})-(0?[13578]|1[02])-(0?[1-9]|[12]\d|3[01]))|(((1[6-9]|[2-9]\d)\d{2})-(0?[13456789]|1[012])-(0?[1-9]|[12]\d|30))|(((1[6-9]|[2-9]\d)\d{2})-0?2-(0?[1-9]|1\d|2[0-8]))|(((1[6-9]|[2-9]\d)(0[48]|[2468][048]|[13579][26])|((16|[2468][048]|[3579][26])00))-0?2-29-))(\s(([01]\d{1})|(2[0123])):([0-5]\d):([0-5]\d))?$/, '日期格式不正确']
        });

        // 获取contentText
        const ctx = function () {
            let pathName = document.location.pathname;
            let index = pathName.substr(1).indexOf("/");
            let result = pathName.substr(0, index + 1);
            return result;
        }();

        var admin = JSON.parse(window.sessionStorage.getItem("user"));

        if(admin!=null){
            form.val("filter",admin);
            if (admin.type>10){
                $("#permission").val("超级管理员")
            }else{
                $("#permission").val("普通管理员")
            }
            $("#demo1").attr("src",ctx+admin.headportrait);
        }else{
            okLayer.yellowSighMsg("登陆时间超时，请重新登录！", function () {
                window.sessionStorage.clear();
                top.window.location = ctx+"/pages/admin/pages/adminLogin.html";
            });
        }

        //拖拽上传
        var uploadInst = upload.render({
            elem: '#test10'
            ,url: ctx+"/admin/updateAdminPhoto" //改成您自己的上传接口
            ,headers:{"token":sessionStorage.getItem("token")}
            ,before: function (obj) {
                this.data={"adminId":admin.adminId};
            }
            ,done: function(res){
                //上传成功
                okLayer.greenLaughMsg("更换头像成功！", function () {
                    window.sessionStorage.setItem("admin", JSON.stringify(res.admin));
                    if (window != top) {
                        top.window.location.reload();
                    }
                });
            },error: function (res) {
                console.log("上传失败",res)
            }
        });

        form.on("submit(edit)", function (data) {
            $.ajax({
                url:ctx+'/admin/updateadmin',
                type:'POST',
                data:{"adminid": data.field.adminid,"realname":data.field.realname,"contactnumber":data.field.contactnumber},
                dataType:'json',
                error:function(){
                    okLayer.redCrossMsg("服务器错误")
                },
                success:function(data){
                    if (data.code == 200) {
                        // 业务正常
                        okLayer.greenTickMsg(data.msg,function () {
                            window.sessionStorage.setItem("user", JSON.stringify(data.data));
                            if (window != top) {
                                top.window.location.reload();
                            }
                        });
                    } else {
                        // 业务异常
                        okLayer.yellowSighMsg(data.msg);
                    }
                }
            });
            return false;
        });

        form.on("submit(reloadData)", function (data) {
            form.val("filter", admin);
            $("#demo1").attr("src",ctx+admin.photo);
        });

    });
</script>
</body>
</html>
